<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换定位 - 舞动健康</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen">
    <!-- 页面内容区 -->
    <main class="relative min-h-screen pb-16">
        <!-- 顶部导航栏 -->
        <div class="bg-white flex items-center justify-between px-4 py-4 sticky top-0 z-20 shadow-sm border-b border-gray-100">
            <a href="index.html" class="text-gray-700">
                <i class="fa-solid fa-arrow-left text-xl"></i>
            </a>
            <h1 class="text-lg font-medium text-center flex-1 text-gray-800">选择位置</h1>
            <div class="w-8"></div>
        </div>
        
        <!-- 搜索框 -->
        <div class="p-4 bg-white border-b border-gray-100 sticky top-16 z-10">
            <div class="flex items-center bg-gray-100 rounded-full px-4 py-2">
                <i class="fa-solid fa-magnifying-glass text-gray-500 mr-2"></i>
                <input type="text" placeholder="搜索位置" class="bg-transparent outline-none w-full text-gray-700">
            </div>
        </div>
        
        <!-- 当前定位 -->
        <div class="p-4 border-b border-gray-200 bg-white">
            <div class="flex items-center mb-2">
                <i class="fa-solid fa-location-arrow text-primary-DEFAULT mr-2"></i>
                <span class="text-sm text-gray-500">当前定位</span>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-start">
                    <i class="fa-solid fa-location-dot text-primary-DEFAULT mr-2 mt-1"></i>
                    <div>
                        <p class="text-base font-medium">上地国际创业园东区2号楼</p>
                        <p class="text-xs text-gray-500">北京市海淀区西北旺东路10号院</p>
                    </div>
                </div>
                <a href="index.html" class="bg-primary-light bg-opacity-10 p-2 rounded-full">
                    <i class="fa-solid fa-check text-primary-DEFAULT"></i>
                </a>
            </div>
        </div>
        
        <!-- 最近使用的位置 -->
        <div class="p-4 bg-white">
            <div class="flex items-center mb-2">
                <i class="fa-regular fa-clock text-gray-500 mr-2"></i>
                <span class="text-sm text-gray-500">最近位置</span>
            </div>
            
            <div class="border-b border-gray-100 py-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-start">
                        <i class="fa-solid fa-location-dot text-gray-400 mr-2 mt-1"></i>
                        <div>
                            <p class="text-base">朝阳大悦城</p>
                            <p class="text-xs text-gray-500">北京市朝阳区朝阳北路101号</p>
                        </div>
                    </div>
                    <a href="index.html" class="text-gray-400 px-2">
                        <i class="fa-solid fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-b border-gray-100 py-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-start">
                        <i class="fa-solid fa-location-dot text-gray-400 mr-2 mt-1"></i>
                        <div>
                            <p class="text-base">望京SOHO</p>
                            <p class="text-xs text-gray-500">北京市朝阳区望京阜通东大街T3号楼</p>
                        </div>
                    </div>
                    <a href="index.html" class="text-gray-400 px-2">
                        <i class="fa-solid fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-b border-gray-100 py-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-start">
                        <i class="fa-solid fa-location-dot text-gray-400 mr-2 mt-1"></i>
                        <div>
                            <p class="text-base">中关村软件园</p>
                            <p class="text-xs text-gray-500">北京市海淀区东北旺西路8号</p>
                        </div>
                    </div>
                    <a href="index.html" class="text-gray-400 px-2">
                        <i class="fa-solid fa-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </main>
</body>
</html> 